<script setup lang="ts">
import { ref } from 'vue'

const imgRef = ref<HTMLImageElement | null>(null)

// const img = document.createElement('img') => HTMLImageElement 拿到img的类型

// 1. 对象可能为null => 直接判断 或者 ?
// 2. 没有指定类型, 就不确定你有src => 指定类型为HTMLImageElement  // imgRef.value = null; imgRef.value = dom对象
// 3. null 也是一个单独的类型 => 联合类型
const getUrl = () => {
  // 1. 自己判断
  // if (imgRef.value) {
  //   console.log('获取图片地址', imgRef.value?.src)
  // }

  // 2. ?. 可选链操作符
  // 下面的方式是对上面的一种优化
  // console.log('获取图片地址', imgRef.value?.src)

  // 3. !. 非空断言
  // 我们心里很清楚 点到按钮时 已经有dom 已经获取到了dom => 非空断言
  // 一旦用了非空断言, 一定要确定真的非空, 否则出了问题, 自己解决
  console.log('获取图片地址', imgRef.value!.src)
}
</script>

<template>
  <div>app组件</div>
  <img
    ref="imgRef"
    src=""
    alt=""
  />
  <button @click="getUrl">获取图片地址</button>
</template>

<style></style>
